<template>
  <div>
    <CategorySelector :disabled="!(isShow === 1)"></CategorySelector>
    <SpuList v-if="isShow === 1" @setShowSpuList="isShowSpuList"></SpuList>
    <AddOrUpdateSpu
      v-else-if="isShow === 2"
      @setShowSpuList="isShowSpuList"
    ></AddOrUpdateSpu>
    <AddSku v-else @setShowSpuList="isShowSpuList"></AddSku>
  </div>
</template>

<script lang="ts">
import CategorySelector from "@/components/CategorySelector/index.vue";
import SpuList from "./components/SpuList.vue";
import AddOrUpdateSpu from "./components/AddOrUpdateSpu.vue";
import AddSku from "./components/AddSku.vue";
export default {
  name: "XSpu",
  components: {
    CategorySelector,
    SpuList,
    AddOrUpdateSpu,
    AddSku,
  },
};
</script>

<script lang="ts" setup>
import { ref } from "vue";
// const isShowSpuList = ref(true);
const isShow = ref(1);
const isShowSpuList = (newVal: number) => {
  isShow.value = newVal;
};
</script>

<style scoped></style>
